<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/admin/adminPage/AdminIndex' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>酒店列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="酒店Id" width="80px" align="center"></el-table-column>
      <el-table-column prop="name" label="酒店名字" width="200px" align="center"
                       :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="location" label="酒店地址" width="200px" align="center"
                       :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="description" label="简介" width="350px" align="center"
                       :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column label="酒店图片" align="center">
        <!--自定义列 显示轮播图图片 必须添加template-->
        <template slot-scope="scope">
          <!--scope.row代表当前行对应的数据里面的对象-->
          <img :src="'http://localhost:9580'+scope.row.url" width="30%">
        </template>
      </el-table-column>
      <el-table-column prop="basePrice" label="基础价格" width="100px" align="center"></el-table-column>
      <el-table-column prop="levelId" label="酒店星级Id" width="80px" align="center"></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle size="mini"
                     @click="openEditDialog(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle size="mini"
                     @click="openDeleteConfirm(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 以下是弹出的修改主题相册的对话框 -->
    <el-dialog title="编辑酒店" :rules="rules" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm">
        <el-form-item label="酒店名字" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="酒店地址" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.location" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="简介" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="基础价格" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.basePrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="酒店类型" :label-width="formLabelWidth">
          <el-select style="width: 250px" v-model="ruleForm.levelId" placeholder="请选择">
            <el-option
                v-for="item in hotelLevel"
                :key="item.id"
                :label="item.type"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="地点图片" :label-width="formLabelWidth">
          <img :src="'http://localhost:9580'+ruleForm.url" width="30%" alt="">
          <!--上传组件开始-->
          <el-upload
              ref="upload"
              :action="'http://localhost:9580/upload?dir='+this.dir"
              name="picFile"
              :limit="1"
              list-type="picture-card"
              :on-success="handleSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <!--上传组件结束-->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button ref="upload" @click="cancelEditForm()">取 消</el-button>
        <el-button type="primary" @click="submitEditForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dir:'酒店',
      tableData: [],
      hotelLevel:[],
      dialogImageUrl: '',
      dialogFormVisible: false,
      dialogVisible: false,
      formLabelWidth: '120px',
      ruleForm:{
        id:'',
        name:'',
        location:'',
        description:'',
        basePrice:'',
        levelId:'',
        url:''
      },
      oldUrl:'',
      newUrl: '',
      rules:{
        name:[
          {required: true, message: '请输入酒店名字', trigger: 'blur'}
        ],
        location: [
          {required: true, message: '请输入酒店地址', trigger: 'blur'}
        ],
        description: [
          {required: true, message: '请输入简介', trigger: 'blur'}
        ],
        basePrice: [
          {required: true, message: '请输入基础价格', trigger: 'blur'}
        ]
      },

    }
  },
  methods: {
    loadThemeImgList() {
      let url = 'http://localhost:9580/hotels/admin/getHotelList';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('aJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.tableData = responseBody.data;
        console.log(this.tableData);
      });
    },
    loadHotelType() {
      let url = 'http://localhost:9580/hotels/admin/getHotelLevelList';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('aJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.hotelLevel = responseBody.data;
      });
    },
    openEditDialog(hotel) {
      let url = 'http://localhost:9580/hotels/admin/' + hotel.id;
      console.log(url);

      this.oldUrl=hotel.url;

      console.log(this.oldUrl);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('aJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.dialogFormVisible = true;
          let hotelInfo = responseBody.data;
          this.ruleForm = hotelInfo;
          this.loadHotelType();
        } else {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadThemeImgList();
            }

          });
        }
      });
    },
    submitEditForm() {
      let url = 'http://localhost:9580/hotels/admin/' + this.ruleForm.id + '/update';
      console.log('url = ' + url);

      console.log('ruleForm.url = ' + this.ruleForm.url);

      let formData = this.qs.stringify(this.ruleForm);
      console.log('formData = ' + formData);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('aJwt')}})
          .post(url, formData).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: '修改酒店成功！',
            type: 'success'
          });
          //发出删除旧图片的请求
          if (this.oldUrl!=this.ruleForm.url){
            let url = 'http://localhost:9580/remove?url=' + this.oldUrl;
            this.axios
                .create({'headers': {'Authorization': localStorage.getItem('aJwt')}})
                .get(url).then(function () {

            })
          }
          this.$refs.upload.clearFiles();
          this.loadThemeImgList();
          this.dialogFormVisible = false;
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.dialogFormVisible = false;
              this.loadThemeImgList();
            }
          });
        } else {
          this.$message.error(responseBody.message);
        }
      });
    },
    cancelEditForm() {
      //发出删除图片的请求
      let url = 'http://localhost:9580/remove?url=' + this.ruleForm.url;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('aJwt')}})
          .get(url).then(function () {

      })
      this.ruleForm.url = '';

      this.$refs.upload.clearFiles();
      this.dialogFormVisible = false;
    },

    openDeleteConfirm(hotel) {
      let message = '此操作将永久删除【' + hotel.name + '】酒店，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(hotel);
      }).catch(() => {
      });

    },
    handleDelete(hotel) {
      let url = 'http://localhost:9580/hotels/admin/' + hotel.id + '/delete';
      console.log('url = ' + url);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('aJwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: '删除酒店成功！',
            type: 'success'
          });
          let url = 'http://localhost:9580/remove?url=' + hotel.url;
          this.axios
              .create({'headers': {'Authorization': localStorage.getItem('aJwt')}})
              .get(url).then(function () {
                console.log("已删除文件夹中的图片");
          })
          this.loadThemeImgList();
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadThemeImgList();
            }
          });
        } else {
          this.$message.error(responseBody.message);
        }
      });
    },
    handleSuccess(response, file, fileList) {
      this.ruleForm.url = response.data;

    },
    handleRemove(file, fileList) {
      //发出删除图片的请求
      let url = 'http://localhost:9580/remove?url=' + this.ruleForm.url;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('aJwt')}})
          .get(url).then(function () {

      })
      this.ruleForm.url = '';

    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  },
  mounted() {
    this.loadThemeImgList();
  }
}
</script>

<style scoped>

</style>